<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">活动标题</span>
          <el-input placeholder="请输入名称" v-model="param.data.activityName"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title" style="width:120px">活动日期</span>
          <el-date-picker
            v-model="createdateList"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          ></el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-container>
      <el-tabs v-model="param.data.st" @tab-click="clicktab">
        <el-tab-pane label="未报名" name="3">
          <el-table :data="tableData" v-loading="isLoading" style="width: 100%" border>
            <el-table-column prop="name" label="活动标题"></el-table-column>
            <el-table-column prop="startTime,endTime" label="活动时间">
              <template slot-scope="scope">{{scope.row.startTime}}~{{scope.row.endTime}}</template>
            </el-table-column>
            <el-table-column
              prop="type"
              label="活动类型"
              :formatter="(row) => { return row.type == 0 ? '满减' : (row.type ==1 ?  '全场折扣' :'满件数折扣') }"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  @click="handleToSignUp(scope.row)"
                  size="small"
                  v-if="isPermissionsBtn('alliance_signUp')"
                  type="primary"
                >报名</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已报名" name="4">
          <el-table :data="tableData" v-loading="isLoading" style="width: 100%" border>
            <el-table-column prop="activityName" label="活动标题"></el-table-column>
            <el-table-column prop="startEndTime" label="活动时间"></el-table-column>
            <el-table-column
              prop="type"
              label="活动类型"
              width="100"
              :formatter="(row) => { return row.type == 0 ? '满减' : (row.type ==1 ?  '全场折扣' :'满件数折扣') }"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              :formatter="(row) => { return row.status == 0 ? '未审批' : '已同意' }"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  @click="handleToSee(scope.row)"
                  type="primary"
                  size="small"
                  v-if="isPermissionsBtn('alliance_detail')"
                >查看报名商品</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="报名失败" name="2">
          <el-table :data="tableData" v-loading="isLoading" style="width: 100%" border>
            <el-table-column prop="activityName" label="活动标题"></el-table-column>
            <el-table-column prop="startEndTime" label="活动时间"></el-table-column>
            <el-table-column
              prop="type"
              label="活动类型"
              :formatter="(row) => { return row.type == 0 ? '满减' : (row.type ==1 ?  '全场折扣' :'满件数折扣') }"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  @click="handleToResetSignUp(scope.row)"
                  type="info"
                  size="small"
                  v-if="isPermissionsBtn('alliance_resign')"
                >重新报名</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <div class="table-body">
          <div class="pagination">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-size.sync="param.queryRequest.pageSize"
              :current-page.sync="param.queryRequest.pageNum"
              :total="totalCount"
            ></el-pagination>
          </div>
        </div>
      </el-tabs>
    </el-container>
    <el-dialog title :visible.sync="isVisible" width="30%">
      <el-table
        ref="singleTable"
        :data="tableData1"
        highlight-current-row
        @current-change="handleCurrentChange1"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column property="spuName" label="商品名称"></el-table-column>
      </el-table>

      <div class="fullcs" v-if="RegisteredType ==0">
        <span class="title" style="margin-right:10px">满</span>
        <el-input v-model="fullReduction.full" style="width:100px"></el-input>
        <span class="title" style="margin-right:10px;margin-left:10px">减</span>
        <el-input v-model="fullReduction.reduction" style="width:100px"></el-input>
      </div>
      <div class="fullcs" v-if="RegisteredType ==1">
        <span class="title" style="margin-right:10px">全场折扣</span>
        <el-input v-model="Discount" style="width:100px"></el-input>
      </div>
      <div class="fullcs" v-if="RegisteredType ==2">
        <span class="title" style="margin-right:10px">满</span>
        <el-input v-model="DiscountNum.Num" style="width:100px"></el-input>
        <span class="title" style="margin-right:10px;margin-left:10px">件</span>
        <el-input v-model="DiscountNum.Discount" style="width:100px"></el-input>
        <span class="title" style="margin-right:10px">折</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      isVisible: false,
      param: {
        data: {
          activityName: "", // 活动名称
          st: "3", //类型
          stTime: "", // 创建开始日期
          byTime: "" // 创建开始日期
        },
        queryRequest: {
          pageNum: 1,
          pageSize: 10
        }
      },
      createdateList: [],
      isLoading: false,
      tableData: [],
      totalCount: 1,
      tableData1: [],
      fullReduction: {
        full: "",
        reduction: ""
      },
      Discount: "",
      RegisteredType: "",
      DiscountNum: {
        Discount: "",
        Num: ""
      }
    };
  },
  components: {},
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  beforeMount() {},
  mounted() {
    this.initData();
  },
  methods: {
    clicktab() {
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    initData() {
      this.isLoading = true;
      if (this.createdateList.length > 0) {
        this.param.data.stTime = this.createdateList[0];
        this.param.data.byTime = this.createdateList[1];
      }
      this.$service.selectCPAll(this.param).then(res => {
        this.isLoading = false;
        if (res.code == "00000") {
          
          if (this.param.data.st == "3") {
            if (
            res.data.records.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
            this.tableData = res.data.records;
            this.totalCount = res.data.total;
          } else {
            if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
            this.tableData = res.data.rows;
            this.totalCount = res.data.total;
          }
        }
      });
    },
    search() {
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    resetSearchCotnet() {
      //重置搜索条件
      this.param.data.activityName = "";
      this.param.data.stTime = "";
      this.param.data.byTime = "";
      this.createdateList = [];
    },
    handleToSignUp(scope) {
      if (scope.type == 0) {
        //满减
        this.$router.push({
          path: "/allianceManJ",
          query: { type: scope.type, id: scope.id,name:scope.name,st:scope.startTime,bt:scope.endTime}
        });
      } else {
        //折扣报名
        this.$router.push({
          path: "/allianceZheK",
          query: { type: scope.type, id: scope.id,name:scope.name,st:scope.startTime,bt:scope.endTime}
        });
      }
    },
    handleToSee(scope) {
      this.isVisible = true;
      this.RegisteredType = scope.type;
      this.tableData1 = scope.coalitionactivitySpuList;
      this.Discount = scope.allDiscount;
      this.fullReduction.full = scope.satisfyMoney;
      this.fullReduction.reduction = scope.reduceMoney;
      this.DiscountNum.Num = scope.discountNum;
      this.DiscountNum.Discount = scope.discount;
    },
    handleToResetSignUp(scope) {
      this.$service.coalitionactivityUpdateStatus(scope.id).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "重新报名成功",
            type: "success"
          });
          this.param.queryRequest.pageNum = 1;
          this.initData();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleCurrentChange(e) {
      this.param.queryRequest.pageNum = e;
      this.initData();
    },
    handleCurrentChange1(e) {}
  },
  watch: {}
};
</script>
<style scoped>
.fullcs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 10px;
  margin-top: 20px;
}
</style>